<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css" />
    <script src="${pageContext.request.contextPath}/layui/jquery2.1.1.js"></script>
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <style>
        .layui-table-cell,.layui-table-box ,.layui-table-body{
            overflow: visible !important;
        }
        td .layui-form-select {
            margin-top: -10px;
            margin-left: -15px;
            margin-right: -15px;
        }
        td .input{
            width: 115px;
            height: 39px;
            margin-top: -9px;
            margin-left: -14px;
        }
        .layui-form-item i{
            display: block;
            margin-top: 10px;
        }
    </style>
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>采购管理</li>
    <li>采购单管理</li>
    <li>修改</li>
  </ul>
</div>
<div class="formbody">
    <div class="formtitle"><span>采购单信息</span></div>
    <div class="layui-form-item">
        <label class="layui-form-label">采购单编号</label>
        <div class="layui-input-inline" >
            <input id="number" name="number" type="text" value="" readonly="readonly" class="layui-input" />
        </div>
        <div class="layui-input-inline" >
            <i>不能编辑</i>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">采购时间</label>
        <div class="layui-input-inline" >
            <input id="poTime" name="poTime" type="text" value="" readonly="readonly" class="layui-input" />
        </div>
        <div class="layui-input-inline" >
            <i>不能编辑</i>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">创建人</label>
        <div class="layui-input-inline" >
            <input id="userPerson" name="userPerson" type="text" value="" readonly="readonly" class="layui-input" />
        </div>
        <div class="layui-input-inline" >
            <i>不能编辑</i>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">审核状态</label>
        <div class="layui-input-inline" >
            <input type="text" value="未审核" readonly="readonly" class="layui-input" />
            <input id="status" name="status" type="hidden" value="1" />
        </div>
        <div class="layui-input-inline" >
            <i>不能编辑</i>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">总金额</label>
        <div class="layui-input-inline" >
            <input id="amount" name="amount" type="text" readonly="readonly" class="layui-input" />
        </div>
        <div class="layui-input-inline" >
            <i>不能编辑</i>
        </div>
    </div>
    <script type="text/html" id="toolbarDemo" >
        <div class="layui-btn-container">
            <button type="button" class="layui-btn btn-del" lay-event="del">删除</button>
            <button type="button" class="layui-btn btn-add" lay-event="update">修改</button>
        </div>
    </script>
</div>
<table id="demo" lay-filter="demo"></table>
<div class="rightinfo" style="display: none" id="inner">
<form class="layui-form" action="">
<input id="number2" name="number" type="text" value="" style="display: none" class="layui-input" />
<input id="orderId2" name="orderId" type="text" value="" style="display: none" class="layui-input" />
<input id="amount2" name="amount" type="text" style="display: none" class="layui-input" />
<table id="PurchaseTable" lay-filter="PurchaseTable"></table>
    <script type="text/html" id="selectName" >
        <select name="editName" id="editName">
            <option value="0">请选择</option>
            <option value="品牌">品牌</option>
        </select>
    </script>
    <script type="text/html" id="selectType" >
        <select name="editType" id="editType">
            <option value="0">请选择</option>
            <option value="类型">类型</option>
        </select>
    </script>
    <script type="text/html" id="selectMode" >
        <select name="editMode" id="editMode">
            <option value="0">请选择</option>
            <option value="型号">型号</option>
        </select>
    </script>
    <script type="text/html" id="selectManu">
        <select name="editManu" id="editManu">
            <option value="0">请选择</option>
            <option value="厂商">厂商</option>
        </select>
    </script>
    <script type="text/html" id="inputNum" >
        <input type="text" id="num" name="inputNum" autocomplete="off" class="layui-input input">
    </script>
    <script type="text/html" id="inputUnits" >
        <input type="text" id="units" name="inputUnits" autocomplete="off" class="layui-input input" >
    </script>
    <script type="text/html" id="inputPrice" >
        <input type="text" id="price" name="inputPrice" autocomplete="off" class="layui-input input" >
    </script>
    <script type="text/html" id="inputAmounts" >
        <input type="text" id="amounts" name="inputAmounts" autocomplete="off" class="layui-input input" readonly="readonly">
    </script>
    <script type="text/html" id="inputId">
        <input type="text" id="orderId" name="orderId" value="" autocomplete="off" class="layui-input input" readonly="readonly">
    </script>
    <script type="text/html" id="toolbarDemo2" >
        <div class="layui-btn-container">
            <button type="button" class="layui-btn btn-add" lay-event="add">新增</button>
            <button type="button" class="layui-btn btn-save" lay-event="save">确认</button>
        </div>
    </script>
    <button lay-submit lay-filter="formDemo" class="layui-btn form-save" style="display: none">修改</button>
</form>
</div>
<script type="text/javascript">
    layui.use(['table', 'form'], function () {
        var table = layui.table,
            $ = layui.jquery,
            util = layui.util,
            form = layui.form;
        $(function () {
            //从父层获取值，json是父层的全局js变量。eval是将该string类型的json串变为标准的json串
            var parent_json = eval('('+parent.json+')');
            $("#number").val(parent_json.number);
            $.ajax({
                url: "/PurchaseOrder/findPurchaseOrderByNumber?number="+$("#number").val(),
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    var data = res;
                    $("#number2").val(data.number);
                    $("#amount").val(data.amount);
                    $("#amount2").val(data.amount);
                    $("#userPerson").val(data.userPerson);
                    $("#status").val(data.status);
                    if ($("#status").val()=="1"){
                        $("#a_status").val("未审核");
                    }else if($("#status").val()=="2"){
                        $("#a_status").val("审核中");
                    }else if($("#status").val()=="3"){
                        $("#a_status").val("审核通过");
                    }else{
                        $("#a_status").val("审核未通过");
                    }
                    $("#poTime").val(util.toDateString(data.poTime, "yyyy-MM-dd HH:mm:ss"));
                },
                error: function () {
                    layer.msg('系统错误，请联系管理员', {icon: 5});
                }
            });
            form.render();
        });

        //监听提交
        form.on('submit(formDemo)',function(data) {
            if ($('#amounts').val()!=null&&$('#amounts').val()!=""&&
                $('#editType').val()!=null&&$('#editType').val()!=""&&
                $('#editName').val()!=null&&$('#editName').val()!=""&&
                $('#editManu').val()!=null&&$('#editManu').val()!=""&&
                $('#editMode').val()!=null&&$('#editMode').val()!=""&&
                $('#num').val()!=null&&$('#num').val()!=""&&
                $('#units').val()!=null&&$('#units').val()!=""&&
                $('#price').val()!=null&&$('#price').val()!="") {
                $.ajax({
                    url: "/PurchaseOrderDetails/updatePurchaseOrderDetails",
                    data: JSON.stringify(data.field),
                    type: 'post',
                    dataType: 'json',
                    contentType: "application/json",
                    success: function (resp) {
                        layer.msg(resp.message, {icon: 6});
                        layer.closeAll();
                        table.reload('demo', {
                            where: {},
                            data: []
                        });
                        table.reload('PurchaseTable', {
                            where: {},
                            data: []
                        });
                    },
                    error: function () {
                        layer.closeAll();
                        layer.msg('系统错误，请联系管理员', {icon: 5});
                    }
                });
                return false;
            } else {
                alert("请确认采购单完整");
                return false;
            }
        });

        //修改数据
        table.render({
            elem: '#PurchaseTable'
            , title: '数据显示'
            , toolbar: '#toolbarDemo2'//开启头部
            , defaultToolbar:false
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'center'}
                , {field: 'orderId', title: '序号', width: 80,align: "center"}
                , {field: 'name', title: '品牌', width: 105, templet: '#selectName', align: "center"}
                , {field: 'type', title: '类型', width: 105, templet: '#selectType', align: "center"}
                , {field: 'mode', title: '型号', width: 105, templet: '#selectMode', align: "center"}
                , {field: 'manufacturer', title: '厂商', width: 105, templet: '#selectManu', align: "center"}
                , {field: 'num', title: '数量', width: 106, templet: '#inputNum', align: "center"}
                , {field: 'units', title: '单位', width: 106, templet: '#inputUnits', align: "center"}
                , {field: 'price', title: '单价', width: 106, templet: '#inputPrice', align: "center"}
                , {field: 'amounts', title: '金额', width: 106, templet: '#inputAmounts', align: "center"}
            ]]
            ,data:[]
        });
        //头部工具栏事件
        table.on('toolbar(PurchaseTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data //获取选中的数据
                , demo = table.cache["PurchaseTable"];//获取表格中的数据
            switch (obj.event) {
                case 'add':
                    //添加时的字段信息
                    var datas = {};
                    //加入数组中
                    demo.push(datas);
                    //重载表格
                    table.reload('PurchaseTable', {
                        data: demo
                    });
                    //赋值采购
                    $.ajax({
                        url: "/PurchaseOrder/getList",
                        type: "post",
                        dataType: "json",
                        success: function(data) {
                            //var json = eval("("+data+")");
                            var brand = eval("("+data.brand+")");
                            var firm =  eval("("+data.firms+")");
                            var good =  eval("("+data.good+")");
                            var type =  eval("("+data.type+")");

                            //使用循环遍历，给下拉列表赋值
                            $("#editName").empty();
                            $("#editName").append(new Option("请选择",""))
                            for(var i=0;i<brand.length;i++){
                                $("#editName").append('<option value="'+brand[i].name+'">'+brand[i].name+'</option>');
                            }

                            $("#editManu").empty();
                            $("#editManu").append(new Option("请选择",""))
                            for(var i=0;i<firm.length;i++){
                                $("#editManu").append('<option value="'+firm[i].name+'">'+firm[i].name+'</option>');
                            }
                            $("#editMode").empty();
                            $("#editMode").append(new Option("请选择",""))
                            for(var i=0;i<good.length;i++){
                                $("#editMode").append('<option value="'+good[i].mode+'">'+good[i].mode+'</option>');
                            }
                            $("#editType").empty();
                            $("#editType").append(new Option("请选择",""))
                            for(var i=0;i<type.length;i++){
                                $("#editType").append('<option value="'+type[i].type+'">'+type[i].type+'</option>');
                            }
                            form.render("select")//重新渲染 固定写法
                        }
                    });
                    break;
                case 'save':
                    if($('#amounts').val()!=null) {
                        $('#amounts').val($('#num').val() * $('#price').val());
                        $('#amount2').val(parseInt($('#amount2').val()) + parseInt($('#amounts').val()));
                        $('#amount').val($('#amount2').val());
                    }
                    break
            }
        });

        //展示已知数据
        table.render({
            elem: '#demo'
            , url: 'http://localhost:8080/PurchaseOrderDetails/getPurchaseOrderDetailsList?number='+$("#number").val() //数据接口
            , toolbar: '#toolbarDemo'//开启头部
            , defaultToolbar:false
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'center'}
                , {field: 'orderId', title: '序号', width: 80, align: "center"}
                , {field: 'name', title: '品牌', width: 105,align: "center"}
                , {field: 'type', title: '类型', width: 105, align: "center"}
                , {field: 'mode', title: '型号', width: 105, align: "center"}
                , {field: 'manufacturer', title: '厂商', width: 105, align: "center"}
                , {field: 'num', title: '数量', width: 105, align: "center"}
                , {field: 'units', title: '单位', width: 105, align: "center"}
                , {field: 'price', title: '单价', width: 105, align: "center"}
                , {field: 'amounts', title: '金额', width: 106, align: "center"}
            ]]
        });
        form.render();
        //头部工具栏事件
        table.on('toolbar(demo)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data //获取选中的数据
                , demo = table.cache["demo"];//获取表格中的数据
            switch (obj.event) {
                case 'del':
                    if (data.length === 0) {
                        layer.msg('请选中一行或多行数据');
                    } else {
                        $(function () {
                            $.ajax({
                                url: "/PurchaseOrderDetails/delPurchaseOrderDetails",
                                data: {
                                    orderId: data[0].orderId,
                                    number: $('#number').val(),
                                    amounts: data[0].amounts
                                },
                                type: 'post',
                                dataType: 'json',
                                success: function (resp) {
                                    layer.msg(resp.message, {icon: 6});
                                    layer.closeAll();
                                    table.reload('demo', {
                                        where: {},
                                        data: []
                                    });
                                },
                                error: function () {
                                    layer.closeAll();
                                    layer.msg('系统错误，请联系管理员', {icon: 5});
                                }
                            });
                            return false;
                        });
                        var tablelist = [];//存储未选中的数据
                        //循环表格数据
                        for (var i in demo) {
                            //判断未选中数据
                            if (!demo[i].LAY_CHECKED) {
                                //存入数组
                                tablelist.push(demo[i]);
                            }
                        }
                        //重载表格
                        table.reload('demo', {
                            data: tablelist
                        });
                        // 刷新
                        location.reload();
                    }
                    break;
                case 'update':
                    $('#amount2').val(parseInt($('#amount2').val()) - parseInt(data[0].amounts));
                    var i = data.length;
                    if (i === 1) {
                        $('#orderId2').val(data[0].orderId);
                        layer.open({
                            type: 1,
                            shift: 2,
                            title: '修改信息',
                            area: ['1000px', '500px'],
                            closeBtn: false,
                            shadeClose: false,
                            content: $('#inner'),
                            btnAlign: 'c',
                            btn: ['保存', '关闭'],
                            yes: function (index, layero) {
                                layero.find('.form-save').click();
                                return false; //开启该代码可禁止点击该按钮关闭弹窗
                            },
                            btn2: function (index, layero) {
                                //默认关闭弹窗
                            }
                        });
                        /* 渲染表单 */
                        form.render();
                    } else {
                        layer.msg('请选择一条信息进行修改', {icon: 5});
                    }
                    break;
            }
        });
        //监听下拉框改变
        form.on('select(lczt)', function (data) {
            var selectElem = $(data.elem);
            var tdElem = selectElem.closest("td");
            var trElem = tdElem.closest("tr");
            var tableView = trElem.closest(".layui-table-view");
            table.cache[tableView.attr("lay-id")][trElem.data("index")][tdElem.data("field")] = data.value;
        });
    });
</script>
</body>
</html>